<template>
  <!-- 添加或修改盘点计划对话框 -->
  <el-dialog :title="title" v-model="open" width="800px" append-to-body>
    <div v-for="(friend, index) in friendStore.friends" :key="index">
      <friend-item v-show="friend.nickName.includes(searchText)" :index="index"
        :active="friend === friendStore.activeFriend" @chat="onSendMessage(friend)" @delete="onDelItem(friend, index)"
        @click.native="onActiveItem(friend, index)">
      </friend-item>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import { useFriendStore } from "@/store/imModules/friendStore";
import { useGroupStore } from "@/store/imModules/groupStore";
import { useImStore } from '@/store/imModules/imStore';
import FriendItem from "@/IM/components/friend/FriendItem.vue";
import request from '@/IM/api/request'
const friendStore = useFriendStore();
const groupStore = useGroupStore();
const imStore = useImStore();
export default {
  name: 'shareIm',
  data() {
    return {
      open: false,
      title: '分享好友',
      selectedRows: [],
      form: {
        quotationStatus: 0
      },
    };
  },
  components: {
    FriendItem,
  },
  computed: {
    friend() {
      return friendStore.friends[this.index];
    },
    friendStore() {
      return useFriendStore();
    }
  },
  methods: {
    pick(row) {
      this.open = true;
      this.form = {}
      this.dataSource = []
      friendStore.loadFriend();
    },
    cancel() {
      this.open = false;
      this.$emit('cancel');
    },
  }

};
</script>

<style lang="scss" scoped>
.friend-item {
  height: 50px;
  display: flex;
  margin-bottom: 1px;
  position: relative;
  padding: 5px 10px;
  align-items: center;
  background-color: #fafafa;
  white-space: nowrap;
  cursor: pointer;

  &:hover {
    background-color: #F8FAFF;
  }

  &.active {
    background-color: #F4F9FF;
  }

  .friend-avatar {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 45px;
    height: 45px;
  }

  .friend-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-left: 10px;
    text-align: left;

    .friend-name {
      font-size: 15px;
      font-weight: 600;
      line-height: 30px;
      white-space: nowrap;
      overflow: hidden;
    }

    .friend-online {
      .online {
        padding-right: 2px;
        width: 15px;
        height: 15px;

      }
    }
  }
}
</style>